<template>
  <div class="page_comNotice">
    <van-nav-bar
      title="公司公告"
      left-arrow
      @click-left="$router.back()"
      ref="vanBar"
    >
      <template #right>
        <van-icon style="margin-right: 20px" name="search" size="20"
                  @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!keyword)"
        />
        <van-icon name="ellipsis" size="18" @click="showOverlay = true" />
      </template>
    </van-nav-bar>


    <van-search
      v-show="searchBoxShow"
      v-model="keyword"
      placeholder="请输入关键字搜索"
      show-action
      shape="round"
      @search="onSearch"
      @clear="toClearKeyWord"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>

    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class="layer">
        <van-cell value="上传公告通知" @click="upNotice(0)" />
        <van-cell value="上传公告任务" @click="upNotice(1)" />
      </van-cell-group>
    </van-overlay>
    <div class="listDiv" v-if="noticeList.length">
      <div class="list" v-for="(item, index) in noticeList" :key="index">
        <div class="character">{{ item.intro }}</div>
        <van-row gutter="20" class="photos" v-if="Array.isArray(item.imgurl)">
          <van-col span="8" v-for="(image, index) in item.imgurl" :key="index">
            <van-image width="110" height="110" :src="image" @click="bigImage(image)" />
          </van-col>
        </van-row>
        <van-row gutter="20" class="photos" v-else>
          <van-col span="8">
            <van-image
              width="110"
              height="110"
              v-if="item.imgurl !== null"
              :src="item.imgurl"
              @click="bigImage(item.imgurl)"
            />
          </van-col>
        </van-row>
        <div class="notice-bottom">
          <div class="bottom-content">
            <div class="notice-name">{{ item.addusername }}</div>
            <div class="notice-time">{{ item.createdate }}</div>
            <div class="notice-type" v-if="active == 0">{{ item.type == 0 ? '公告通知' : '公告任务' }}</div>
          </div>
        </div>
      </div>

      <van-pagination
        v-show="total > 0"
        style="margin: 10px 0"
        v-model="pageIndex"
        :total-items="total"
        @change="handlePaginationChange_notice"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
      <div class="tips"></div>
    </div>

    <div class="tips" v-else>没有数据了</div>
    <!-- tarbar -->
    <van-tabbar v-model="active" class="company-tarbar" active-color="#ee0a24">
      <van-tabbar-item :icon="item.icon" @click="onTarbar(index)" v-for="(item, index) in tarBarValue" :key="index">
        {{item.value }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import {ImagePreview, Toast} from 'vant'
import ComNoticeListOper from '../../../components/comNoticeListOper.vue';
import {mapGetters} from "vuex";

export default {
  components: {
    ComNoticeListOper
  },
  data() {
    return {
      showOverlay: false,
      listShowOverlay: false,
      searchBoxShow: false,
      active: 0,
      message: '',
      photos: '',
      noticeList: [],
      total: 0,
      keyword: '',
      pageIndex: 1,
      tarBarValue: [
        {
          value: '公告首页',
          icon: 'home-o'
        },
        {
          value: '公告通知',
          icon: 'comment-o'
        },
        {
          value: '公告任务',
          icon: 'todo-list-o'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['allUserInfo']),
  },
  created() {
    this.getNotice()
  },

  methods: {
    bigImage(img) {
      ImagePreview({
        images: [img],
        closeable: true
      })
    },
    // 搜索框事件
    toSearch() {
      const company_id = this.allUserInfo.company_id;
      this.$router.push({
        path: `/searchMyNotice/${company_id}`
      })
    },

    onSearch() {
      this.pageIndex = 1;
      if(this.keyword.trim()){
        this.getNotice();
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return null
      }
      this.keyword = '';
      this.pageIndex = 1;
      this.$nextTick(() => {
        //
        this.getNotice();
      })
    },


    //查询公司公告
    async getNotice() {
      const formData = {
        company_id: this.allUserInfo.company_id,
        type: this.active - 1,
        key: this.keyword,
        pageIndex: this.pageIndex,
        pageSize: 10,
      }
      const res = await this.$api.company.reqGetComNotice(formData)
      this.noticeList = res.data.items;
      this.total = res.data.count;

      this.noticeList.forEach(element => {
        if (element.imgurl != null && element.imgurl.indexOf(',') != -1) {
          element.imgurl = element.imgurl.split(',')
        }
      })
    },
    upNotice(type) {
      this.$router.push({
        path: `/myCompany/upNotice/${type}`
      })
    },
    onTarbar(index) {
      this.active = index;
      this.pageIndex = 1;

      this.$nextTick(()=>{
        this.getNotice();
      });
    },

    handlePaginationChange_notice(pageIndex){
      this.pageIndex = pageIndex;
      this.$nextTick(()=>{
        this.getNotice();
      });
    },
  }
}
</script>
<style lang="less">
.page_comNotice {
  min-height: 100vh;
  background: #fff;
  .listDiv {
    .tips {
      margin-top: 1.33333rem;
      padding-bottom: 3rem;
      text-align: center;
    }
  }
  .over_layer {
    margin-top: 46.6px;
    height: 100%;
    .layer {
      width: 40%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  .list {
    border-bottom: 0.02667rem solid #ebedf0;
    .notice-bottom {
      margin: 0 0.42667rem;
      margin-bottom: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #999;
      .bottom-content {
        display: flex;
        align-items: center;
        .notice-type {
          margin-left: 1.5rem;
        }
        .notice-name {
          margin-right: 5px;
        }
        .notice-time {
          margin-top: 0.03rem;
        }
      }
      .bottom-boole {
        margin-right: 10px;
        color: #3d2c63;
      }
    }
    .character {
      margin: 0 0.42667rem;
      margin-top: 0.3rem;
      padding: 0.1rem 0;
      font-size: 0.37333rem;
    }
    .photos {
      padding: 0.26667rem 0.42667rem;
      .van-col {
        margin-bottom: 10px;
      }
    }
  }
  .tips {
    margin-top: 1.33333rem;
    padding-bottom: 3rem;
    text-align: center;
  }
}
</style>
